<template>
  <view class="salaryAnalysisContainer">
    <view class="textContent nonBottomPadding">
      <view class="salary">
        <view class="includeCity">
          <view class="title pl">热度变化趋势</view>
        </view>
        <!-- <view class="salaryDataShow">
          <view class="middle">本月热度
            <view class="blueMoney">{{ salaryRegionData.fiftyPercentile || "-" }}</view>
          </view>
          <view class="middle line">|</view>
          <view class="middle">环比上月
            <view class="blueMoney">{{
              PositiveNegative(salaryRegionData.ratio) || "-"
            }}</view>
          </view>
        </view> -->
        <lineHeatChange :lineHeatChangeChart="lineHeatChangeChart" v-show="!hideCharts"></lineHeatChange>
      </view>
    </view>
    <view class="title middle">企业招聘要求</view>
    <view class="textContent">
      <view class="salary">
        <view class="includeCity" v-if="majorList.length">
          <view class="title pl">专业要求</view>
        </view>
        <view class="majorRequire" v-if="majorList.length">
          <view class="majorItem" v-for="(item, index) in majorList" :key="index" @click="handleMajorClick(item)">
            <template v-if="item.tagName"> {{ item.tagName }} > </template>
          </view>
        </view>
        <view class="includeCity">
          <view class="title pl">学历要求</view>
        </view>
        <pieChartStudy :recruimentStudyChart="recruimentStudyChart"></pieChartStudy>
        <view class="divideLine"></view>
        <view class="includeCity">
          <view class="title pl">工作经验要求</view>
        </view>
        <pieChartWork :recruimentWorkYearChart="recruimentWorkYearChart"></pieChartWork>
        <view class="bottom-block"></view>
      </view>
    </view>
  </view>
</template>
<script>
import { getSecondLevelLayerDetails } from "@/api/modules/career";
import { heatChange } from "@/api/modules/positionDictionary";
import lineHeatChange from "./charts/lineHeatChange.vue";
import pieChartStudy from "./charts/pieChartStudy.vue";
import pieChartWork from "./charts/pieChartWork.vue";
export default {
  name: "RecruitmentAnalysis",
  components: {
    lineHeatChange,
    // pieChartStudy接收Array类型的Data
    pieChartStudy,
    pieChartWork,
  },
  props: {
    positionId: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    positionName: {
      type: String,
      default: "该职位",
    },
    personId: {
      type: String,
      default: "",
    },
    showFilterBox: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      hideCharts: false,
      requestSent: false,
      majorList: [],
      currentRegion: {}, //当前区域地址
      salaryRegionData: {
        fiftyPercentile: "0",
        ratio: null,
        list: [],
      },
      lineHeatChangeChart: {},
      recruimentStudyChart: {},
      recruimentWorkYearChart: {},
      regionList: {},
      regionIndex: [0],
      showRegion: false,
      srcSalaryInfo:
        this.$imgBaseSelf +
        "career/positionDictionary/job_detail_salary_changed_triangle.png",
    };
  },
  created() {
    // this.getThreeChartsData();
    // this.reqGetHeatChange();
  },
  watch: {
    positionId: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.getThreeChartsData();
          this.reqGetHeatChange();
        }
      },
      immediate: true,
    },
    currentIndex: {
      handler(newValue, oldValue) {
        if (oldValue == 0) {
          this.getThreeChartsData();
          this.reqGetHeatChange();
        }
      },
    },
    showFilterBox: {
      handler(newValue, oldValue) {
        if (newValue) {
          setTimeout(() => {
            this.hideCharts = newValue;
          }, 300);
        } else {
          this.hideCharts = newValue;
        }
      },
      immediate: true,
    },
  },
  onLoad() {},
  mounted() {},
  methods: {
    handleMajorClick(item) {
      let params = `positionTagId=${item.positionTagId}`;
      uni.navigateTo({
        url: `/pagesSub/careerNew/majorDetail/index?${params}`,
      });
    },
    reqGetHeatChange() {
      const params = {
        id: this.positionId,
        regionIds: "100000",
      };
      heatChange(params).then((res) => {
        if (res.code == 200) {
          // console.log("heatChange", res.data);

          this.lineHeatChangeChartFormat(res.data[0].list);
        } else {
          // console.log("请求失败");
        }
      });
    },
    getThreeChartsData() {
      if (this.requestSent) return;
      this.requestSent = true;
      const params = {
        id: this.positionId,
        layerIds: "15_29",
      };
      getSecondLevelLayerDetails(params)
        .then((res) => {
          if (res.code == 200) {
            const requirementItem = res.data[0];
            requirementItem.children.forEach((item, index) => {
              if (item.layerId == 75) {
                this.recruimentStudyChartFormate(item.data);
              } else if (item.layerId == 124) {
                this.recruimentWorkYearChartFormat(item.data);
              }
            });
            //对口专业 也就是专业要求
            this.majorList = res.data[1].children[0].data;
          } else {
            console.log("请求失败");
          }
        })
        .finally(() => {
          this.requestSent = false;
        });
    },
    lineHeatChangeChartFormat(list) {
      let result = {
        dataX: [],
        dataY: [],
      };
      if (!list || !(list instanceof Array)) {
        return;
      }
      list.forEach((lis, index, array) => {
        if (lis.description == "总结") {
          return;
        }
        result.dataX.push(lis.month + "\n" + lis.year); //X轴的字段
        result.dataY.push(lis.heatNum); //y轴的字段（数值）
      });

      this.lineHeatChangeChart = result;

      console.log("lineHeatChangeChartFormat result", this.lineHeatChangeChart);
    },
    recruimentStudyChartFormate(list) {
      let result = {
        dataX: [],
        dataY: [],
      };
      if (!list || !(list instanceof Array)) {
        return;
      }
      list.forEach((lis, index, array) => {
        if (lis.description == "总结") {
          return;
        }
        result.dataX.push(lis.description); //X轴的字段
        result.dataY.push(lis.layerValue.slice(0, -1)); //y轴的字段（数值）
      });

      this.recruimentStudyChart = result;
    },
    recruimentWorkYearChartFormat(list) {
      // console.log("recruimentWorkYearChartFormat", list);

      let result = {
        dataX: [],
        dataY: [],
      };
      if (!list || !(list instanceof Array)) {
        return;
      }
      list.forEach((lis) => {
        if (lis.description == "总结") {
          return;
        }
        result.dataX.push(lis.description); //X轴的字段
        result.dataY.push(lis.layerValue.slice(0, -1)); //y轴的字段（数值）
      });
      this.recruimentWorkYearChart = result;
      // console.log("lineHeatChangeChartFormat list", list);
    },
    chooseCity() {
      this.showRegion = true;
    },
    regionConfirm(e) {
      this.regionIndex = e;
      this.currentRegion = this.regionList[e[0]];
      this.salaryRegionData = {
        fiftyPercentile: "0",
        ratio: null,
        list: [],
      };
      this.getThreeChartsData();
    },
    PositiveNegative(str) {
      if (str && str != "") {
        if (str[0] != "-") {
          return "+" + str;
        }
      }
      return str;
    },
  },
};
</script>
<style lang="scss" scoped>
@font-face {
  font-family: "D-DIN-PRO-700-Bold";
  /*定义字体名称*/
  src: url("https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/D-DIN-PRO-700-Bold.ttf");
}
.banner {
  margin: 0 0 20rpx;
}
.title {
  font-size: 32rpx;
  font-family: PingFang-SC-Heavy, PingFang-SC;
  font-weight: 800;
  color: #333333;
  padding: 0 34rpx;
  &.middle {
    margin: 20rpx 0 24rpx;
  }
}
.salaryAnalysisContainer {
  margin: 0 0 0 0;
  .textContent {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #555555;
    line-height: 48rpx;
    white-space: pre-wrap;
    overflow: hidden;

    padding: 34rpx 0rpx;
    background: #ffffff;
    border-radius: 24rpx;
    // margin-top: 22rpx;
    &.nonBottomPadding {
      padding-bottom: 0;
      margin-bottom: 20rpx;
    }
    .salary {
      position: relative;
      margin-top: 10rpx;
      // padding-bottom: 60rpx;
      &:last-of-type {
        // padding-bottom: 120rpx;
      }
      .includeCity {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0rpx 34rpx;

        .pl {
          padding: 0 0;
        }
      }

      .salaryDataShow {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #999999;
        font-size: 26rpx;
        font-weight: 400;
        margin-top: 34rpx;
        padding: 0 44rpx;

        .middle {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 0 30rpx;

          .blueMoney {
            color: #066bff;
            font-size: 36rpx;
            font-weight: bold;
          }
        }
        .line {
          font-size: 40rpx;
          line-height: 40rpx;
          color: #e5e5e5;
        }
      }
      .majorRequire {
        margin-top: 28rpx;
        padding: 0 32rpx 48rpx;
        /* border: 2rpx solid #f4f4f4; */
        margin-bottom: 42rpx;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .majorItem {
          display: flex;
          align-items: center;
          justify-content: center;
          background: #edf4ff;
          border-radius: 12rpx;
          padding: 14rpx 24rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
          text-align: center;
          font-style: normal;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
        }
      }
    }
    .divideLine {
      width: 622rpx;
      margin: 0 auto;
      height: 2rpx;
      border: 2rpx solid #f4f4f4;
      margin-bottom: 42rpx;
    }
    .bottom-block {
      width: 100%;
      height: 160rpx;
    }
  }
}
.citySelected {
  display: flex;
  align-items: center;
  // padding: 0 44rpx;
  font-size: 24rpx;
  color: #888888;
  background: #f6f6f6;
  padding: 16rpx;
  border-radius: 12rpx;
  display: flex;
  line-height: 36rpx;
  img {
    margin-left: 8rpx;
    width: 14rpx;
    height: 14rpx;
  }
}
.reChoose {
  top: 0;
  right: 32rpx;
  position: absolute;
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #888888;
  padding-bottom: 20rpx;
}
.echarts-wrap {
  width: 100%;
  margin-top: 12rpx;
}
.emptyLoading {
  height: 450rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}
</style>
